.px2rem(@name, @px) {
    @{name}: @px / 75 * 1rem;
}

.padding(@top, @right, @bottom, @left) {
    .px2rem(padding-top, @top);
    .px2rem(padding-right, @right);
    .px2rem(padding-bottom, @bottom);
    .px2rem(padding-left, @left);
}

.margin(@top, @right, @bottom, @left) {
    .px2rem(margin-top, @top);
    .px2rem(margin-right, @right);
    .px2rem(margin-bottom, @bottom);
    .px2rem(margin-left, @left);
}

.position(@top, @right, @bottom, @left) {
    .px2rem(top, @top);
    .px2rem(right, @right);
    .px2rem(bottom, @bottom);
    .px2rem(left, @left);
}

.pl(@pl) {
    .px2rem(padding-left, @pl);
}

.pr(@pr) {
    .px2rem(padding-right, @pr);
}

.pt(@pt) {
    .px2rem(padding-top, @pt);
}

.pb(@pb) {
    .px2rem(padding-bottom, @pb);
}

.ml(@ml) {
    .px2rem(margin-left, @ml);
}

.mr(@mr) {
    .px2rem(margin-right, @mr);
}

.mt(@mt) {
    .px2rem(margin-top, @mt);
}

.mb(@mb) {
    .px2rem(margin-bottom, @mb);
}

.w(@width) {
    .px2rem(width, @width);
}

.h(@height) {
    .px2rem(height, @height);
}

.lh(@lh) {
    .px2rem(line-height, @lh)
}

.fz(@fz) {
    .px2rem(font-size, @fz)
}

.l(@l) {
    .px2rem(left, @l);
}

.r(@r) {
    .px2rem(right, @r);
}

.t(@t) {
    .px2rem(top, @t);
}

.b(@b) {
    .px2rem(bottom,@b);
}

.font-dpr(@font-size) {
    font-size: @font-size;
    [data-dpr="2"] & {
        font-size: @font-size * 2;
    }
    [data-dpr="3"] & {
        font-size: @font-size * 3;
    }
}
